<template>
  <div class="app-container">
    <el-form label-width="120px" :model="ruleForm" ref="ruleForm">
      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">申诉基本信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="商品名称：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.orderProductName }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申诉状态：">
            <div class="yxkj-word-black">
              {{ codeBox.SELLER_COMPLAINT[sellerComplaintVO.state] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属商家：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.sellerName }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="商品主图：">
            <div class="yxkj-word-black">
              <el-image
                style="width: 150px; height: 150px"
                :src="$imagePath + sellerComplaintVO.masterImg"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉来源：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.source }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="订单号：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.orderSn }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用户名：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.userName }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉详情：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.question }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉时间：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.complaintTime }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="sellerComplaintVO.image != ''" label="投诉图片：">
            <div class="yxkj-word-black">
              <el-image
                style="width: 150px; height: 150px"
                :src="$imagePath + sellerComplaintVO.image"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-divider content-position="left">
          <legend class="divider-line">商家申诉信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="申诉内容：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.sellerCompContent }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="申诉时间：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.sellerComplaintTime }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-if="sellerComplaintVO.sellerCompImage != ''"
            label="申诉图片："
          >
            <div class="yxkj-word-black">
              <el-image
                style="width: 150px; height: 150px"
                :src="$imagePath + sellerComplaintVO.sellerCompImage"
              ></el-image>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-bottom: 60px;">
        <el-divider content-position="left">
          <legend class="divider-line">平台处理信息</legend>
        </el-divider>
        <el-col :span="24">
          <el-form-item label="申诉状态：">
            <div class="yxkj-word-black">
              {{ codeBox.SELLER_COMPLAINT[sellerComplaintVO.state] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审核时间：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.optTime }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="处理结果：">
            <div class="yxkj-word-black">
              {{ sellerComplaintVO.optContent }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="投诉来源：">
            <div class="yxkj-word-black">{{ sellerComplaintVO.source }}</div>
          </el-form-item>
        </el-col>
        <div v-if="source == 1">
          <el-col :span="24">
            <el-form-item label="退货数量：">
              <div class="yxkj-word-black">{{ obj.number }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="退货状态：">
              <el-select
                class="toolbar-lable-right"
                v-model="ruleForm.state"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in stateReturn"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>

        <div v-if="source == 2">
          <el-col :span="24">
            <el-form-item label="换货数量：">
              <div class="yxkj-word-black">{{ obj.number }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="换货状态">
              <el-select
                class="toolbar-lable-right"
                v-model="ruleForm.state"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="item in stateExchg"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
      </el-row>

      <el-row :gutter="24">
        <div class="fixed-bottom-20">
          <el-button type="danger" @click="submitForm('ruleForm')"
            >重置</el-button
          >
          <el-button type="success" @click="back">返回</el-button>
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { resetComplaint, doresetComplaint } from "@/api/orderafter";
import { getCodeManager, codeToArray } from "@/api/all";
import { Message } from "element-ui";
export default {
  name: "complaintdetails",
  data() {
    return {
      sellerComplaintVO: {},
      obj: {},
      source: 0,
      stateReturn: [],
      stateExchg: [],
      ruleForm: {
        id: "",
        source: "",
        state: "",
        backExchangeId: ""
      }
    };
  },
  created() {
    let id = this.$route.query.id;
    resetComplaint({ id: id }).then(res => {
      (this.sellerComplaintVO = res.data.data.sellerComplaintVO),
        (this.source = res.data.data.source),
        (this.obj = res.data.data.obj);
    });
    // 是否推荐
    getCodeManager(
      "SELLER_COMPLAINT,MEM_PROD_EXCHG_STATE,MEM_PB_STATE_RETURN",
      () => {
        this.stateReturn = codeToArray("MEM_PB_STATE_RETURN");
        this.stateExchg = codeToArray("MEM_PROD_EXCHG_STATE");
      }
    );
  },
  methods: {
    back() {
      history.back();
    },
    submitForm() {
      this.ruleForm.id = this.sellerComplaintVO.id;
      this.ruleForm.source = this.source;
      this.ruleForm.backExchangeId = this.obj.id;
      if (this.ruleForm.state == "") {
        Message.error("请选择重置的状态");
        return;
      }
      doresetComplaint(this.ruleForm).then(res => {
        if (!res.data.success) {
          Message.error(res.data.message);
          return;
        }
        Message.success("操作成功");
        history.back();
      });
    }
  }
};
</script>
<style scoped>
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
.el-form-item {
  margin-bottom: 5px;
}
.picture-list {
  display: flex;
}
.picture-list li {
  list-style: none;
  margin-right: 10px;
}
</style>
